<template>
  <div class="layout">
    <header class="header" :class="[ $route.name === 'home' ? 'sticky' : '']">
			<div class="container">
				<div class="logo">
					<g-link to="/">
						<img class="logo__img" src="../../static/img/logo.svg" alt="logo">
					</g-link>
				</div>
				<nav class="nav">
					<g-link class="nav__link" to="/journal" active-class="active">Journal</g-link>
					<g-link class="nav__link" to="/contact" active-class="active">Say Hi!</g-link>
				</nav>
			</div>
    </header>
		<div class="container">
			<slot/>
		</div>
		<slot name="list"/>
		<footer class="footer">
			<div class="container">
				Copyright © 2021
			</div>
		</footer>
  </div>
</template>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style>
body {
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  margin:0;
  padding:0;
  line-height: 1.5;
}

.layout {
	padding: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
	height: 6rem;
  z-index: 10;
}

.sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

.header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	width: 100%;
}

.logo__img {
	height: 1.5rem;
}

.nav__link {
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	margin-top: 4px;
	margin-right: 3rem;
	padding-bottom: 4px;
	border-bottom: 1px solid;
	border-color: transparent;
	transition: border .15s;
	color: black
}

.nav .nav__link:last-child{
	margin-right: 0;
}

.nav__link:hover, .nav__link.active {
	border-color: inherit!important;
	color: black;
	text-decoration: none;
}

.footer {
	font-size: .8rem;
	padding: 6rem 0;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}
</style>
